<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span='24'>
            <div class='grid-content bg-purple-dark'>
              <div>
                <p style='color: #1be3db'>招聘中</p>
              </div>
              <el-row :gutter='20'>
                <el-col :span='6'>
                  <div class='aatable-content_title'>
                    <el-popover
                      placement='right'
                      width='400'
                      trigger='hover'>
                      <el-descriptions class='margin-top' :column='1' :colon='false'>
                        <el-descriptions-item>{{ this.postsDetails.TITLE }}</el-descriptions-item>
                      </el-descriptions>
                      <el-link :underline='false' slot='reference'>
                        <span style='font-size: 2em; color: #ffffff;'
                              class='aatable-content_title'>{{ this.postsDetails.TITLE }}</span>
                      </el-link>
                    </el-popover>
                  </div>
                </el-col>
                <el-col :span='6' :offset='6'>
                  <div class='aatable-content_wages'>
                    <el-popover
                      placement='right'
                      width='400'
                      trigger='hover'>
                      <el-descriptions class='margin-top' :column='1' :colon='false'>
                        <el-descriptions-item>{{ this.postsDetails.WAGES || '面议' }}</el-descriptions-item>
                      </el-descriptions>
                      <el-link :underline='false' slot='reference'>
                        <span style='font-size: 2em; color: #ce6115;'
                              class='aatable-content_title'>{{ this.postsDetails.WAGES || '面议' }}</span>
                      </el-link>
                    </el-popover>
                  </div>
                </el-col>
              </el-row>
              <div style='padding-top: 30px;'>
                <el-row>
                  <el-col :span='12'>
                    <div>
                      <span style='color: white'>需求人数：{{ this.postsDetails.NEEDNUM }}</span>
                    </div>
                  </el-col>
                  <el-col :span='12'>
                    <div>
                      <span style='color: white'>年龄要求：{{ this.postsDetails.AGE }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div style='padding-top: 30px;'>
                <el-row>
                  <el-col :span='8'>
                    <div class='aatable-content_title'>
                      <i style='color: white' class='el-icon-location-information'></i>
                      <el-popover
                        placement='right'
                        width='400'
                        trigger='hover'>
                        <el-descriptions class='margin-top' :column='1' :colon='false'>
                          <el-descriptions-item>{{ this.postsDetails.ADDRESS || '暂无地址' }}</el-descriptions-item>
                        </el-descriptions>
                        <el-link :underline='false' slot='reference'>
                          <span style='color: white; padding-left: 10px;'
                                class='aatable-content_title'>{{ this.postsDetails.ADDRESS || '-' }}</span>
                        </el-link>
                      </el-popover>
                    </div>
                  </el-col>
                  <el-col :span='8'>
                    <div class='aatable-content_title'>
                      <i style='color: white' class='el-icon-suitcase'></i>
                      <el-popover
                        placement='right'
                        width='400'
                        trigger='hover'>
                        <el-descriptions class='margin-top' :column='1' :colon='false'>
                          <el-descriptions-item>{{ this.postsDetails.EXP || '经验不限' }}</el-descriptions-item>
                        </el-descriptions>
                        <el-link :underline='false' slot='reference'>
                          <span style='color: white; padding-left: 10px;'
                                class='aatable-content_title'>{{ this.postsDetails.EXP || '经验不限' }}</span>
                        </el-link>
                      </el-popover>
                    </div>
                  </el-col>
                  <el-col :span='8'>
                    <div>
                      <i style='color: white' class='el-icon-s-check'></i>
                      <span style='color: white; padding-left: 10px;'>{{ educationTransformation(this.postsDetails.EDUCATION) }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <div style='padding-top: 30px;'>
                <div style='padding-top: 30px; display:inline; padding-left: 30px;' v-if='this.isCollection == 0'>
                  <el-button type='primary' icon='el-icon-star-on' @click='collectionPositionByPostId'>收藏该职位</el-button>
                </div>
                <div  style='padding-top: 30px; display:inline; padding-left: 30px;' v-if='this.isApply == 0'>
                  <el-button type='success' icon='el-icon-s-flag' @click='applyByPostId'>申请该职位</el-button>
                </div>
                <div style='padding-top: 30px; display:inline; padding-left: 30px;' v-if='this.isCollection > 0'>
                  <el-tag>职位已收藏</el-tag>
                </div>

                <div style='padding-top: 30px; display:inline; padding-left: 30px;' v-if='this.isApply > 0'>
                  <el-tag>职位已申请</el-tag>
                </div>
              </div>

            </div>
          </el-col>
        </el-row>
        <div style='padding-top: 20px;'>
          <el-card>
            <h4>职位描述</h4>
            <div v-html="this.postsDetails.JOBDESC || '暂无内容'" style='height:100%'></div>
            <div v-html="this.postsDetails.JOBREQ || '暂无内容'" style='height: 100%'></div>
          </el-card>
        </div>
        <div style='padding-top: 20px;'>
          <el-card>
            <el-row style='display: flex; justify-content: center; align-items: center;'>
              <el-col :span='12'>
                <div>
                  <h4>公司描述</h4>
                </div>
              </el-col>
              <el-col :span='12'>
                <div v-if='this.isFollow == 0'>
                  <el-button style='float: right' type='primary' icon='el-icon-star-on' @click='followCompanyByCid'>
                    关注该公司
                  </el-button>
                </div>
                <div style='float: right' v-if='this.isFollow > 0'>
                  <el-tag>已关注</el-tag>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span='4'>
                <div style='width: 150px; height: 100%;'>
                  <el-image style='width: 100%;' :src='this.postsDetails.LOGO'></el-image>
                </div>
              </el-col>
              <el-col :span='20'>
                <div style='width: 100%; height: 100%;'>
                  <el-descriptions :column='2'>
                    <el-descriptions-item label='公司名称'>{{ this.postsDetails.COMPANY }}</el-descriptions-item>
                    <el-descriptions-item label='行业类别'>{{ this.postsDetails.INDUSTRYNAME }}</el-descriptions-item>
                    <el-descriptions-item label='规模'>{{ this.postsDetails.SCALE }}</el-descriptions-item>
                    <el-descriptions-item label='性质'>{{ this.postsDetails.NATURE }}</el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions :column='1'>
                    <el-descriptions-item label='公司地址'>{{ this.postsDetails.HCADDRESS || '-' }}</el-descriptions-item>
                    <el-descriptions-item label='公司简介'><div v-html="this.postsDetails.COMDESC || '暂无内容'" style='height: 100%'></div></el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import { getPostsDetails, collectionPost, followCompanyByCid, applyByPost } from '@/api/api'

export default {
  name: 'postDetails',
  data() {
    return {
      postsDetails: '',
      postsId: this.$route.query.id,
      isCollection: '',
      isFollow: '',
      isApply:''
    }
  },

  mounted() {
    this.getPostsDetails()
  },

  methods: {
    educationTransformation(education) {
      if (isNaN(parseFloat(education))) {
        return education
      } else {
        switch (education) {
          case '1':
            return '初中'
          case '2':
            return '高中'
          case '3':
            return '中专'
          case '4':
            return '大专'
          case '5':
            return '本科'
          case '6':
            return '研究生'
          case '7':
            return '其他'
          case '0':
            return '不限'
        }
      }
    },
    getPostsDetails() {
      const data = {
        posts_id: this.postsId
      }
      getPostsDetails(data).then(res => {
        if (res.code == 200) {
          //返回的用户的基本信息
          this.postsDetails = res.data
          this.isCollection = res.data.isCollection
          this.isFollow = res.data.isFollow
          this.isApply = res.data.isApply
        }
      })
    },

    collectionPositionByPostId() {
      const data = {
        postId: this.postsDetails.postId
      }
      collectionPost(data).then(res => {
        if (res.code == 200) {
          this.$message.success('职位收藏成功')
          this.isCollection = 1
        }
      })
    },

    applyByPostId() {
      const data = {
        postId: this.postsDetails.postId
      }
      applyByPost(data).then(res => {
        if (res.code == 200) {
          this.$message.success('已成功申请该职位')
          this.isApply = 1
        }
      })
    },

    followCompanyByCid() {
      const data = {
        cid: this.postsDetails.COMPANYID
      }
      followCompanyByCid(data).then(res => {
        if (res.code == 200) {
          this.$message.success('已关注')
          this.isFollow = 1
        }
      })

    }
  }
}
</script>

<style scoped>
.bg-purple-dark {
  background-color: #233e49;
  padding: 20px;
}

.grid-content {
  border-radius: 4px;
  min-height: 220px;
}

.aatable-content_title {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.aatable-content_wages {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ce6115;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>
